import { PROJECT_PREFIX } from '../base'

interface KeyframeCollection {
  [animationName: string]: string
}

export const KEYFRAME_STYLES: KeyframeCollection = {
  // 旋转动画
  spin: `
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `,
  // 加载旋转动画
  loadingRotate: `
    @keyframes loadingRotate {
      0% { transform: translateY(-50%) rotate(0deg); }
      100% { transform: translateY(-50%) rotate(360deg); }
    }
  `,
  // 刷新加载器旋转动画
  refreshLoading: `
    @keyframes refreshLoading {
      to {
        transform: rotate(360deg);
      }
    }
  `,
  // 淡入动画
  fadeIn: `
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-5px); /* 添加轻微上移动画 */
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  `,
  noResultFadeIn: `
    @keyframes noResultFadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  `,
  imageFadeIn: `
    @keyframes imageFadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  `,
  skeletonShimmer: `
    @keyframes skeletonShimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }
  `,
  fadeOut: `
    @keyframes fadeOut {
      0% { opacity: 1; }
      100% { opacity: 0; transform: translateY(-10px); }
    }
  `,
  marquee: `
    @keyframes marquee {
      0% {
        transform: translate3d(0, 0, 0);
      }
      100% {
        transform: translate3d(-100%, 0, 0);
      }
    }
  `,
  pause: `
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
  `,
  pulseWarning: `
    @keyframes pulseWarning {
      0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
      70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    }
  `,
  badgeRipple: `
    @keyframes badgeRipple {
      0% {
        box-shadow: 
          0 0 0 0 var(--badge-ripple-color-start),
          0 0 0 0 var(--badge-ripple-color-end);
      }
      100% {
        box-shadow: 
          0 0 0 2px var(--badge-ripple-color-start),
          0 0 0 4px var(--badge-ripple-color-end);
      }
    }
  `,
  // VIP 动画
  vipGlow: `
    @keyframes vip-glow {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(50%); }
    }
  `,
  // 闪耀动画
  shine: `
    @keyframes shine {
      0% { left: -50%; top: -50%; }
      100% { left: 150%; top: 150%; }
    }
  `,
  // 脉冲动画
  highlightPulse: `
    @keyframes highlight-pulse {
      0% { background-color: transparent; }
      20% { background-color: rgba(255, 235, 59, 0.5); }
      100% { background-color: transparent; }
    }
  `,
  // 发光效果
  highlightGlow: `
    @keyframes highlight-glow {
      0%, 100% { box-shadow: 0 0 0 0 transparent; }
      50% { box-shadow: 0 0 20px 5px var(--${PROJECT_PREFIX}-highlight-color, rgba(255, 235, 59, 0.7)); }
    }
  `,
  // 电流动画
  electric: `
    @keyframes electricFlow {
      0% {
        background-position: 0 0;
        opacity: 0.8;
      }
      25% {
        opacity: 1;
      }
      50% {
        background-position: 200% 0;
        opacity: 0.9;
      }
      75% {
        opacity: 1;
      }
      100% {
        background-position: 400% 0;
        opacity: 0.8;
      }
    }
    @keyframes electricFlash {
      0%, 100% { opacity: 0; top: -5px; }
      20%, 80% { opacity: 0.7; }
      50% { opacity: 1; top: 100%; }
    }
  `,
  // 捐赠金额动画
  moneyDonate: `
    @keyframes moneyRise {
      0% {
        transform: translateY(0) scale(0.5);
        opacity: 1;
      }
      100% {
        transform: translateY(-80px) scale(1.2);
        opacity: 0;
      }
    }
    @keyframes moneyJump {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      50% { transform: translateY(-8px) rotate(5deg); }
    }
  `,
  star: `
    @keyframes starPulse {
      0%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 255, 0, 0);
      }
      50% { 
        transform: scale(1.3);
        text-shadow: 0 0 15px rgba(255, 255, 0, 0.7);
      }
    }
    @keyframes starShine {
      0% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.8;
      }
      100% {
        transform: translateX(-50%) scale(1.5);
        opacity: 0;
      }
    }
  `,
  bubble: `
    @keyframes bubbleRise {
      0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }
      100% {
        transform: translateX(-50%) translateY(-40px);
        opacity: 0;
      }
    }
    @keyframes bubbleWave {
      0%, 100% { transform: translateX(-50%) scaleX(1); }
      50% { transform: translateX(-50%) scaleX(0.8); }
    }
    @keyframes bubbleFloat {
      0%, 100% { 
        transform: translateY(0) rotate(0deg);
      }
      50% { 
        transform: translateY(-10px) rotate(5deg);
      }
    }
  `,
  emojiFloat: `
    @keyframes emojiFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-10px) rotate(5deg); }
    }
  `,
  // 无效抖动
  invalid: `
    @keyframes invalidShake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }
  `,
}

/**
 * 生成关键帧 CSS 字符串
 * @param keyframes 关键帧集合
 * @returns 拼接后的 CSS 字符串
 */
export function generateKeyframesCSS(keyframes: KeyframeCollection): string {
  return Object.values(keyframes).join('\n')
}

/**
 * 获取指定动画的 CSS
 * @param animationNames 需要获取的动画名称数组（为空则返回全部）
 * @returns 动画 CSS 字符串
 */
export function getAnimationCSS(animationNames?: string[]): string {
  const filteredKeyframes = animationNames
    ? Object.fromEntries(
        Object.entries(KEYFRAME_STYLES).filter(([name]) =>
          animationNames.includes(name),
        ),
      )
    : KEYFRAME_STYLES

  return generateKeyframesCSS(filteredKeyframes)
}
